window.addEventListener('load', function () {
  //获取用户相关信息 start
  localStorage.setItem('gologin', '请先登录')
  localStorage.setItem('zc', '免费注册')
  const token = localStorage.getItem('xtxtoken')
  var gologin = document.querySelector('.gologin')
  var zc = document.querySelector('.zc')
  gologin.innerHTML = localStorage.getItem('gologin')
  zc.innerHTML = localStorage.getItem('zc')
  if (token) {
    axios({
      method: 'GET',
      url: 'http://big-event-vue-api-t.itheima.net/my/userinfo',
      headers: {
        Authorization: token,
      },
    })
      .then(({ data: res }) => {
        if (res.code !== 0) {
          alert('获取用户信息错误')
        } else {
          localStorage.setItem('gologin', res.data.nickname)
          localStorage.setItem('zc', '退出登录')
          gologin.innerHTML = res.data.nickname || res.data.username
          zc.innerHTML = '退出登录'
        }
      })
      .catch((error) => {
        console.log(error)
        alert('用户身份信息过期,请重新登录')
        location.href = './login.html'
        localStorage.removeItem('xtxtoken')
      })
  }
  gologin.addEventListener('click', function () {
    if (localStorage.getItem('gologin') == '请先登录') {
      location.href = './login.html'
    } else {
      location.href = './personal.html'
    }
  })
  zc.addEventListener('click', function () {
    if (localStorage.getItem('zc') == '免费注册') {
      location.href = './register.html'
    } else {
      location.href = './login.html'
      localStorage.removeItem('xtxtoken')
    }
  })
  //获取用户相关信息 end
  // 轮播图功能  start
  // 1. 获取元素
  var arrow_l = document.querySelector('.arrow-l')
  var arrow_r = document.querySelector('.arrow-r')
  var focus = document.querySelector('.banner-right')
  var focusWidth = focus.offsetWidth
  // 2. 鼠标经过focus 就显示隐藏左右按钮
  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block'
    arrow_r.style.display = 'block'
    clearInterval(timer)
    timer = null // 清除定时器变量
  })
  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none'
    arrow_r.style.display = 'none'
    timer = setInterval(function () {
      //手动调用点击事件
      arrow_r.click()
    }, 2000)
  })
  // 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈
  var ul = focus.querySelector('ul')
  var ol = focus.querySelector('.circle')
  // console.log(ul.children.length);
  for (var i = 0; i < ul.children.length; i++) {
    // 创建一个小li
    var li = document.createElement('li')
    // 记录当前小圆圈的索引号 通过自定义属性来做
    li.setAttribute('index', i)
    // 把小li插入到ol 里面
    ol.appendChild(li)
    // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
    li.addEventListener('click', function () {
      // 干掉所有人 把所有的小li 清除 current 类名
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = ''
      }
      // 留下我自己  当前的小li 设置current 类名
      this.className = 'current'
      // 5. 点击小圆圈，移动图片 当然移动的是 ul
      // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
      // 当我们点击了某个小li 就拿到当前小li 的索引号
      var index = this.getAttribute('index')
      // 当我们点击了某个小li 就要把这个li 的索引号给 num
      num = index
      // 当我们点击了某个小li 就要把这个li 的索引号给 circle
      circle = index
      // num = circle = index;
      console.log(focusWidth)
      console.log(index)

      animate(ul, -index * focusWidth)
    })
  }
  // 把ol里面的第一个小li设置类名为 current
  ol.children[0].className = 'current'
  // 6. 克隆第一张图片(li)放到ul 最后面
  var first = ul.children[0].cloneNode(true)
  ul.appendChild(first)
  // 7. 点击右侧按钮， 图片滚动一张
  var num = 0
  // circle 控制小圆圈的播放
  var circle = 0
  // flag 节流阀
  var flag = true
  arrow_r.addEventListener('click', function () {
    if (flag) {
      flag = false // 关闭节流阀
      // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
      if (num == ul.children.length - 1) {
        ul.style.left = 0
        num = 0
      }
      num++
      animate(ul, -num * focusWidth, function () {
        flag = true // 打开节流阀
      })
      // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
      circle++
      // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
      if (circle == ol.children.length) {
        circle = 0
      }
      // 调用函数
      circleChange()
    }
  })

  // 9. 左侧按钮做法
  arrow_l.addEventListener('click', function () {
    if (flag) {
      flag = false
      if (num == 0) {
        num = ul.children.length - 1
        ul.style.left = -num * focusWidth + 'px'
      }
      num--
      animate(ul, -num * focusWidth, function () {
        flag = true
      })
      // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
      circle--
      // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
      // if (circle < 0) {
      //     circle = ol.children.length - 1;
      // }
      circle = circle < 0 ? ol.children.length - 1 : circle
      // 调用函数
      circleChange()
    }
  })

  function circleChange() {
    // 先清除其余小圆圈的current类名
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = ''
    }
    // 留下当前的小圆圈的current类名
    ol.children[circle].className = 'current'
  }
  // 10. 自动播放轮播图
  var timer = setInterval(function () {
    //手动调用点击事件
    arrow_r.click()
  }, 2000)
  //轮播图功能 end
  //轮播热门品牌 start
  var hot_bd = document.querySelector('.hot-bd').querySelector('ul')
  var hotan = document.querySelectorAll('.hot-an')
  for (var k = 0; k < hotan.length; k++) {
    hotan[k].setAttribute('data-index', k)
    hotan[k].addEventListener('click', function () {
      const name = this.getAttribute('class')
      const xd = this.nextElementSibling || this.previousElementSibling
      const index = this.getAttribute('data-index')
      const reg = /hot-prev/
      const br = reg.test(name)
      if (br) {
        this.className = 'hot-an hot-next'
        xd.className = 'hot-an hot-prev'
        if (index == 0) {
          hot_bd.style.transform = 'translateX(-1245px)'
        } else {
          hot_bd.style.transform = 'translateX(0)'
        }
      } else {
        return false
      }
    })
  }
  //轮播热门品牌 end
})
